<template>
	<view>
		<view class="header">
			<view @click="preMonth()">◀</view>
			<view>{{showedYearMonth}}</view>
			<view @click="nextMonth()">▶</view>
		</view>
		<Calendar class="calendar" :yearMonth="showedYearMonth"></Calendar>
	</view>
</template>

<script>
	import Calendar from '../../components/Calendar/Calendar.vue'
	export default {
		components:{
			Calendar
		},
		data() {
			return {
				curDateTime:new Date()
			};
		},
		computed:{
			showedYearMonth(){
				return this.$dayJs(this.curDateTime).format('YYYY-MM')
			}
			
		},
		mounted() {
		},
		methods:{
			preMonth(){
				this.curDateTime = new Date(this.curDateTime.getFullYear(),this.curDateTime.getMonth()-1)
			},
			nextMonth(){
				this.curDateTime = new Date(this.curDateTime.getFullYear(),this.curDateTime.getMonth()+1)
			}
		}
	}
</script>

<style lang="scss">
.header{
	height:100rpx;
	background-color: rgba(207,240,158,1);
	display: flex;
	justify-content: center;
	
	view{
		width: 30%;
		line-height: 100rpx;
		text-align: center;
	}
}
.calendar{
	height: 50vh;
}
</style>
